{%extends "base.html"%}
{%block title%}
重置密码
{%endblock%}
{%block body%}
<script>
    let main;
    let reset_token = decodeURIComponent(decodeURIComponent(window.location.href.split("/").pop()));
    $(document).ready(() => {

        main = new Vue({
            el: "#main",
            delimiters: ['{[', ']}'],
            mixins: [baseMixin],
            data: {
                error_message: "",
                identifier: "",
                reset_token: "",
                password: "", success_message: ""
            }, methods: {
                submit: function () {
                    this.error_message = this.success_message = "";
                    if (this.identifier == "" || this.password == "") {
                        this.error_message = "请输入用户名或密码";
                        return;
                    }
                    $.post("/api/reset_password", {
                        identifier: main.identifier, password: this.md5WithSalt(main.password), reset_token: reset_token
                    }).done(function (ctx) {
                        ctx = JSON.parse(ctx);
                        console.log(ctx);
                        if (ctx.code == 0) {
                            main.success_message = ctx.message;
                        } else {
                            main.error_message = ctx.message;
                        }

                    });
                }
            }
        });
    });

</script>
<div style="top:10%;max-width: 500px;">
    <div class="ui left aligned container">
        <div class="ui header">
            <h1>重置密码</h1>
        </div>
        <div class="ui stack segment">
            <div id="main" class="ui form" v-bind:class="{error:error_message!='',success:success_message!=''}">
                <div class="ui field">
                    <label>用户名或邮箱:</label>
                    <input type="text" placeholder="用户名或邮箱.." v-model="identifier">
                </div>
                <div class="field">
                    <label>新密码</label>
                    <input type="password" v-model="password" placeholder="密码.." v-on:keyup.enter="login">
                </div>

                <div class="ui error message">
                    <div class="header">错误</div>
                    <p>{[error_message]}</p>
                </div>
                <div class="ui success message">
                    <div class="header">成功</div>
                    <p>{[success_message]}</p>
                </div>
                <div class="ui green submit button" v-on:click="submit">提交</div>
            </div>
        </div>
    </div>
</div>
{%endblock%}